Motion Design with Figma: Animations, Motion Graphics, UX/UI

Explore common misconceptions about motion design, including the idea that motion tells stories and that motion is only an afterthought, when transitions guide user interactions in UX.

Align motion with usability by meeting expectations and reducing gaps between perception and experience. Ensure consistency across user flow and scenes, linking continuity with spatial, aesthetic, and hierarchical attributes throughout.

Explore microinteractions, contained product moments for single use cases, that make user experiences smooth and convey brand tone. See examples like alarms, notifications, and Facebook reactions.

Explore Dan Stafford's four essential parts of a microinteraction—trigger, rules, feedback, and loops and modes—and learn how these elements shape effective motion design in user interfaces.

Review how motion design streamlines user interactions, supports usability, and builds mental models, while clarifying misconceptions and outlining micro-interactions with triggers, rules, feedback, modes, and loops.

Choose your path in motion design with Figma: beginners follow an introduction to Figma before diving into motion design, while experienced designers skip ahead to motion design content.

Create and import design files, duplicate and rename them, and manage your workspace with favorites and deletions while navigating the canvas, left and right sidebars, and the toolbar.

Explore the left sidebar in figma, with frames, shapes, groups, and components, plus nesting, renaming, lock/hide, and the assets panel for reusable master components, propagating changes to instances.

Compare groups, frames, and sections as containers in Figma. Frames provide device-sized scaffolds with own properties and auto layout, while sections label regions for collaboration, handoff, and layout grids.

Explore basic shapes in Figma, including rectangles, ellipses, lines, and arrows, and learn boolean operations: union, subtract, intersect, and exclude, for creating custom vector shapes and logos.

Learn to import images into figma with the Unsplash plugin, drag and drop, or desktop import, then crop, reposition, scale, rotate, and apply fill, fit, borders, and exposure controls.

Learn to design with text in Figma by creating text layers, adjusting fonts, size, line height, letter spacing, paragraph spacing, alignment, lists, and truncating with ellipses.

Explore Figma basics by creating a quick logo with shapes: use the shape tool, form an arc, tilt the start, fix the ratio, and apply color with the eyedropper.

Create responsive auto layout buttons in Figma by building a primary button with 44px height and 24px padding, plus a secondary stroke button and a text button with an icon.

Design a responsive text frame on MacBook Air with a black background and white headline deploy to the cloud with confidence, using fill text and auto layout for resizing.

Explore imagery and gradients in Figma by applying a background image to a frame with the Unsplash plugin, layering fills, and building a gradient from dark bottom to light top.

Create a responsive landing page in Figma, including a logo, buttons, and navigation, using Autolayout for a flexible layout, and share your work on Discord for feedback.

Explore smart animate basics in Figma to craft parallax, messages, overlays, and an interactive button using built-in properties and assets.

Explore smart animate in Figma by animating scale, position, opacity, rotation, and fill across frames. Keep identical layer names to drive seamless transitions and mix multiple properties in prototypes.

Explore Smart Animate basics in prototyping, from swapping elements and navigating between frames to customizing easing, durations, and spring settings for natural, bouncy transitions.

Master rapid parallax effects by duplicating frames, using smart animate on position and opacity, and adjusting after delay to create layered motion in prototypes.

Create overlays in your frames to build hover tooltips and reveal information without a modal. Use auto layout, 300ms ease-out hover interactions, and a simple overlay setup in prototypes.

Create an interactive button with default and hover states using variants and components; prototype with smart animate and auto layout, and embed an interactive form with checkboxes across frames.

Explore how to build category transitions in a Figma prototype by linking three home screens, using smart animate, fade effects, and drag navigation between matching layers.

Create interactive icon buttons in Figma by implementing micro-interactions with outline and filled icons, a circular 32×32 background, and state variants for pressed and loved.

Assemble interactive icons into a frame, then test micro-interactions in prototype mode to simulate liking, navigating, and adding favorites with auto spacing and padding.

Create a punchy screen transition prototype in Figma by masking an image to reveal a main image with parallax, using staggered, named layers and a 300 ms after-delay animation.

Discover hijacked horizontal scrolling by building a multi-page prototype in Figma, using on-drag actions to move between photos with gentle smart animation.

Complete the assignment by creating interactive components for a photo inspiration mobile app, exploring navigation state transitions, like and save actions, and gallery flows across prototypes.

Explore easing to align UI motion with user expectations, compare it to linear motion, and see how natural acceleration and deceleration create continuity and naturalism in interface animations.

Offset and delay define relationships and hierarchies among moving UI elements, signaling related yet distinct functionality and creating a staggered, one after another motion that reveals multiple interaction options.

Learn how transformation creates a smooth narrative flow by turning one UI element into another, such as a download or play button evolving into a progress bar or audio icon.

Explore how masking reveals and conceals parts of a UI element, creating continuity and progressing through interactions, like a card turning into a profile avatar and expanding to next page.

Overlay simulates depth in 2D UI by hiding and revealing elements along the x and y axes to establish a z-axis hierarchy, creating foreground/background distinctions and guiding spatial orientation.

Explore dimensionality to link UI element sides and enable seamless screen transitions. Learn origami dimensionality, floating dimensionality, and object dimensionality, including foldable, flippable, and depth-rich interactions.

Build a navigation system in Figma using auto layout components and icons. Duplicate and arrange assets, create a navigation frame named nav items, and set up transitions.

Build advanced navigation transitions by creating multiple icon states, including an active state, with a five-step animation sequence and prototype flow for a complex home navigation.

Design a heart navigation interaction in Figma by duplicating hearts, aligning, clipping content, and linking scale and timing to create a sequence of animations for home, cart, and settings.

Create a cart interactive component and bring navigation to life by animating cart with variants, keyframes, delays, and rotations alongside home and heart icons in Figma.

Create a complex settings navigation by duplicating assets, setting animation sequences, and linking rotated components with on-click triggers and delays, guiding spins through home, heart, cart, and settings.

Explore building interactive navigation with icons and custom spring animation in Figma, using auto layout, variants, and component states to prototype a multi-tab UI.

Create a landing page prototype in Figma using auto layout, a gradient overlay, and parallax layers with the CN tower over Toronto lettering; duplicate assets and stagger content delivery.

Create anchor links to enable scrolling navigation on a landing page, using on-click actions to jump to sections and back to the top with a gentle 2000 animation.

Build simple parallax animations in Figma by duplicating assets, staggering content, and syncing layered movements to create a two-page prototype with timed reveals.

Create pagination using carousel dots in Figma, building default, hover, and active states with interactive components and smart animate. Set up a carousel prototype and reset component states for navigation.

Build a reusable pagination control in Figma using left and right arrows, hover and pressed states, a disabled state, and a text page indicator.

Learn to implement app scrolling with overflow and fixed elements in Figma, using 375 px device widths, sticky headers, and prototyping to create seamless drag and scroll effects.

Learn to build a drag-and-drop interaction in Figma by creating four frames and using smart animate for drag transitions, hover effects, and a drop shadow between in-progress and done.

Master microinteractions in Figma by building a simple file uploader with states, a loader animation from 0 to 100, and a background reveal using smart animate.

Explore microinteractions for an uploader success animation, extending a simple upload to reveal a loader, a check mark, and a complete message with subtle bounce.

Explore how to build a cancel upload microinteraction in a Figma prototype. Add a loading indicator and background loader, with a dissolve transition to show cancellation.

Create a like button with a bouncy microinteraction in Figma by animating the icon through states, delays, and a custom spring transition, then test with prototypes.

Explore building a delightful checklist animation in figma, using interactive components and variants for type and completed state, where a shrinking line transitions into a check and a strike-through label.

Drive discovery to decide when to use motion in design. Use stakeholder interviews, personas, usability tests, and journey mapping to align motion with user needs and provide clear feedback.

Design and storyboard step for motion design: start with sketches, create storyboards with key states and annotations to visualize flows, gather early feedback, and select concepts to prototype and test.

Prototype your design in Figma to bring ideas into motion quickly, testing low to high fidelity interactions. Use prototyping to reveal ideas to users, reducing time and effort for refinements.

Outline the testing stage in motion design: schedule tests with representative users, run tasks, collect and review feedback against discovery challenges, and iterate to improve the user experience.

Learn quick motion tips to animate between states with continuity, shared elements, and staggered deliveries; use context, feedback, and deliberate timing to guide attention and delight users.

Learn to build an interactive National Geographic carousel in Figma, create image transitions and a 3d effect, and use plugins like Material Design Icons and Unsplash for navigation and imagery.

Create a full page carousel prototype with interactive transitions, including 3D image variations and size rotation, then share on discord.

Learn to build toggle components and an interactive temperature slider for a smart home app in Figma, prototype with color, and complete an end-of-lesson assignment using icons and imagery plugins.

Design and prototype a toggle card in Figma for a smart home app, implementing on/off states, color changes, and responsive layouts to showcase motion design in ux/ui.

Design a draggable temperature slider in Figma, with a gradient fill and frosted glass background, supporting five states from cool to hot and on-drag prototyping.

Use auto layout toggle cards to assemble a simple one-page prototype with ready-to-go interactive components, illustrating a living room setup and user flow.

Prototype a color temperature control in figma using a slider, background color changes, and duplicate sections to visualize heating and cooling with color blending and blur.

Learn to prototype a navigation transition in a smart home app by animating background blur, pushing content, and using an overlay panel opened with a drag gesture.

Create and extend complex interactive components by building a toggle card and a drag-driven slider, exploring additional controls within the app, and sharing your work in the Discord community.